<template>
  <div class="home">
    <div>
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        lazy-render
        :height="260"
        indicator-color="white"
        :show-indicators="false"
      >
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <van-image width="100%" height="240" :src="image" fit="fill" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- <van-nav-bar title="首页" />
    <div class="content">
      <van-button type="primary" @click="handleToast">点击测试</van-button>
      <div class="demo-box">
        <p class="text">这是一段测试文字</p>
        <div class="box"></div>
      </div>
    </div> -->
    <div class="box-card">
      <van-grid :gutter="20" :column-num="2" :border="false">
        <van-grid-item class="yu-yue" @click="toReservation">在线预约</van-grid-item>
        <van-grid-item class="shi-xiang-cha-zhao">事项查找</van-grid-item>
        <van-grid-item class="bang-ban-fu-wu">帮办服务</van-grid-item>
        <van-grid-item class="yu-shang-ke-fu">云上客服 </van-grid-item>
      </van-grid>
    </div>
    <div class="event-details">
      <van-cell-group inset class="shop-title">
        <van-cell title="政策超市" icon="shop-collect-o" />
      </van-cell-group>
      <van-cell-group inset class="shop-title">
        <van-cell title="智能匹配" icon="cluster-o" />
      </van-cell-group>
      <van-cell-group inset class="shop-title">
        <van-cell title="一键申报" icon="star-o" />
      </van-cell-group>
      <van-cell-group inset class="shop-title">
        <van-cell title="兑付公示" icon="coupon-o" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// import { showToast } from 'vant'
const images = ref(
  Object.values(
    import.meta.glob('@assets/home/*.jpg', { eager: true, as: 'url' })
  )
)
const router = useRouter()
const toReservation = ()=>{
  router.push('/reservation-server')
}
// const handleToast = () => {
//   showToast('测试成功')
// }
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  box-sizing: border-box;
  height: 100vh;
}
.my-swipe {
  width: 100% !important;
}
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  // background: linear-gradient(180deg, #01c196 0%, #93e39a 100%);
}
.box-card {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  color: #fff;
  font-size: 18px;
  letter-spacing: 2px;
}
.yu-yue :deep(.van-grid-item__content) {
  background: linear-gradient(90deg, #01c196 0%, #33d170 100%) !important;
  border-radius: 10px;
}
.shi-xiang-cha-zhao :deep(.van-grid-item__content) {
  background: linear-gradient(270deg, #0ea4f4 0%, #066be6 100%);
  border-radius: 10px;
}
.bang-ban-fu-wu :deep(.van-grid-item__content) {
  background: linear-gradient(265deg, #ff9f00 0%, #ff6600 100%);
  border-radius: 10px;
}
.yu-shang-ke-fu :deep(.van-grid-item__content) {
  background: linear-gradient(270deg, #45f2ff 0%, #01b4c1 100%);
  border-radius: 10px;
}
.event-details {
  width: 100%;
  box-sizing: border-box;
}
.shop-title {
  margin: 20px;
  background: linear-gradient( 180deg, #F3F4FB 0%, #F4F5FA 100%);
  border-radius: 8px;
}
.shop-title :deep(.van-cell) {
  background: linear-gradient( 180deg, #F3F4FB 0%, #F4F5FA 100%) !important;
  border-radius: 8px;
}
.shop-title :deep(.van-cell__left-icon) {
  font-size: 28px;
  color: #066be6;
  vertical-align: middle;
  margin-right: 10px;
}

</style>
